<template>
  <div>
<!--    <Row type="flex">-->
<!--      <Card style="width:100%;margin: 10px;">-->
<!--        <div>-->
<!--          <h3 style="text-align:center">云创俱乐部概况</h3>-->
<!--          <p>{{club_detail}}</p>-->
<!--        </div>-->
<!--      </Card>-->
<!--    </Row>-->
    <Row type="flex" style="margin: 0 10px">
      <span>职场：</span>
      <RadioGroup v-model="address">
        <Radio label="所有" value="所有"></Radio>
        <Radio label="深圳" value="深圳"></Radio>
        <Radio label="上海" value="上海"></Radio>
        <Radio label="杭州" value="杭州"></Radio>
        <Radio label="武汉" value="武汉"></Radio>
      </RadioGroup>
    </Row>
    <Row type="flex">
      <Col span="6" order="index" v-for="(item, index) in clubInfo.filter(obj => (address === '所有' || obj.clubAddress === address))"  :key="index" style="padding: 10px">
        <Card class="club-card">
          <p slot="title"><Icon type="waterdrop"></Icon>{{item.clubName}}</p>
          <a href="#" slot="extra" @click.prevent="changeLimit">
            <Icon type="ios-loop-strong"></Icon>

          </a>
          <Row type="flex" justify="center" align="middle" class="countto-page-row">
            <div class="count-to-con">
              <img :src="item.clubImg" width="100%" alt="">
            </div>
          </Row>
          <p>人数：<count-to style="display: inline" :end="Number(item.clubNum)"/></p>
          <p>负责人：{{item.clubMaster}}</p>
          <img v-if="item.clubAdd" class="club-card-add" :src="icon_added" alt="">
        </Card>

      </Col>
    </Row>
    <Row type="flex">
      <div class="view-box" style="align-items: center;width:100%;margin: 10px">
        <org-view v-if="data" :data="data"></org-view>
      </div>
    </Row>
  </div>

</template>

<script>
import OrgView from '../../components/org-tree/components/org-view.vue'
import CountTo from '_c/count-to'
export default {
  name: 'club',
  components: {
    CountTo,
    OrgView
  },
  data () {
    return {
      icon_added: require('@/imgs/icon-added.png'),
      address: '深圳',
      clubInfo: [
        {
          'clubId': '101101',
          'clubName': '深圳羽毛球俱乐部',
          'clubNum': '55',
          'clubAddress': '深圳',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubMaster': '吴彦祖',
          'iconImg': '',
          'clubAdd': true
        },
        {
          'clubId': '101102',
          'clubName': '深圳篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-2.png'),
          'clubAddress': '深圳',
          'clubMaster': '黎明',
          'iconImg': '',
          'clubAdd': true
        },
        {
          'clubId': '101103',
          'clubName': '深圳乒乓球俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-9.png'),
          'clubAddress': '深圳',
          'clubMaster': '梁朝伟',
          'iconImg': ''
        }, {
          'clubId': '101104',
          'clubName': '深圳游泳俱乐部',
          'clubNum': '28',
          'clubImg': require('@/imgs/icon-club-4.png'),
          'clubAddress': '深圳',
          'clubMaster': '孙杨',
          'iconImg': ''
        }, {
          'clubId': '101105',
          'clubName': '深圳足球俱乐部',
          'clubNum': '36',
          'clubImg': require('@/imgs/icon-club-5.png'),
          'clubAddress': '深圳',
          'clubMaster': '李华',
          'iconImg': ''
        }, {
          'clubId': '106',
          'clubName': '深圳瑜伽俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-6.png'),
          'clubAddress': '深圳',
          'clubMaster': 'hhhh',
          'iconImg': ''
        }, {
          'clubId': '101107',
          'clubName': '深圳户外活动俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-7.png'),
          'clubAddress': '深圳',
          'clubMaster': '薛之谦',
          'iconImg': ''
        }, {
          'clubId': '101108',
          'clubName': '深圳舞蹈俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-8.png'),
          'clubAddress': '深圳',
          'clubMaster': '薛之谦',
          'iconImg': ''
        },

        {
          'clubId': '102101',
          'clubName': '上海羽毛球俱乐部',
          'clubNum': '55',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubAddress': '上海',
          'clubMaster': '上海吴彦祖',
          'iconImg': ''
        },
        {
          'clubId': '102102',
          'clubName': '上海篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-2.png'),
          'clubAddress': '上海',
          'clubMaster': '上海黎明',
          'iconImg': ''
        },
        {
          'clubId': '102103',
          'clubName': '上海乒乓球俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-9.png'),
          'clubAddress': '上海',
          'clubMaster': '上海梁朝伟',
          'iconImg': ''
        }, {
          'clubId': '102104',
          'clubName': '上海游泳俱乐部',
          'clubNum': '28',
          'clubImg': require('@/imgs/icon-club-4.png'),
          'clubAddress': '上海',
          'clubMaster': '上海孙杨',
          'iconImg': ''
        }, {
          'clubId': '102105',
          'clubName': '上海足球俱乐部',
          'clubNum': '36',
          'clubImg': require('@/imgs/icon-club-5.png'),
          'clubAddress': '上海',
          'clubMaster': '上海李华',
          'iconImg': ''
        }, {
          'clubId': '102106',
          'clubName': '上海瑜伽俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-6.png'),
          'clubAddress': '上海',
          'clubMaster': '上海hhhh',
          'iconImg': ''
        }, {
          'clubId': '102107',
          'clubName': '上海户外活动俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-7.png'),
          'clubAddress': '上海',
          'clubMaster': '上海薛之谦',
          'iconImg': ''
        }, {
          'clubId': '103101',
          'clubName': '杭州羽毛球俱乐部',
          'clubNum': '55',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州吴彦祖',
          'iconImg': ''
        },
        {
          'clubId': '103102',
          'clubName': '杭州篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-2.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州黎明',
          'iconImg': ''
        },
        {
          'clubId': '103103',
          'clubName': '杭州乒乓球俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-9.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州梁朝伟',
          'iconImg': ''
        }, {
          'clubId': '103104',
          'clubName': '杭州游泳俱乐部',
          'clubNum': '28',
          'clubImg': require('@/imgs/icon-club-4.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州孙杨',
          'iconImg': ''
        }, {
          'clubId': '103105',
          'clubName': '杭州足球俱乐部',
          'clubNum': '36',
          'clubImg': require('@/imgs/icon-club-5.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州李华',
          'iconImg': ''
        }, {
          'clubId': '103106',
          'clubName': '杭州瑜伽俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-6.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州hhhh',
          'iconImg': ''
        }, {
          'clubId': '103107',
          'clubName': '杭州户外活动俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-7.png'),
          'clubAddress': '杭州',
          'clubMaster': '杭州薛之谦',
          'iconImg': ''
        }, {
          'clubId': '104101',
          'clubName': '武汉羽毛球俱乐部',
          'clubNum': '55',
          'clubImg': require('@/assets/images/icon-club-3.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉吴彦祖',
          'iconImg': ''
        },
        {
          'clubId': '104102',
          'clubName': '武汉篮球俱乐部',
          'clubNum': '61',
          'clubImg': require('@/assets/images/icon-club-2.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉黎明',
          'iconImg': ''
        },
        {
          'clubId': '104103',
          'clubName': '武汉乒乓球俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-9.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉梁朝伟',
          'iconImg': ''
        }, {
          'clubId': '104104',
          'clubName': '武汉游泳俱乐部',
          'clubNum': '28',
          'clubImg': require('@/imgs/icon-club-4.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉孙杨',
          'iconImg': ''
        }, {
          'clubId': '104105',
          'clubName': '武汉足球俱乐部',
          'clubNum': '36',
          'clubImg': require('@/imgs/icon-club-5.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉李华',
          'iconImg': ''
        }, {
          'clubId': '104106',
          'clubName': '武汉瑜伽俱乐部',
          'clubNum': '32',
          'clubImg': require('@/imgs/icon-club-6.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉hhhh',
          'iconImg': ''
        }, {
          'clubId': '104107',
          'clubName': '武汉户外活动俱乐部',
          'clubNum': '31',
          'clubImg': require('@/imgs/icon-club-7.png'),
          'clubAddress': '武汉',
          'clubMaster': '武汉薛之谦',
          'iconImg': ''
        }
      ],
      clubName: ['篮球', '羽毛球', '足球', '乒乓球', '排球'],
      club_detail: '武汉新入职的小伙伴有喜欢篮球的欢迎加入篮球俱乐部， 目前花山和招银大厦这边一般一到两周都会组织篮球活动，欢迎大家踊跃加入，一起切磋切磋，玩耍玩耍。 有兴趣的企业微信上可以联系“陈然”或者“陈昕”又或者武汉篮球俱乐部其他成员邀请加入。。。',
      end: 0,
      data: {
        id: 0,
        label: '招银云创俱乐部',
        children: [
          {
            id: 2,
            label: '羽毛球俱乐部'
          }, {
            id: 3,
            label: '篮球俱乐部'
          }, {
            id: 4,
            label: '乒乓球俱乐部'
          }, {
            id: 5,
            label: '足球俱乐部'
          }, {
            id: 6,
            label: '游泳俱乐部'
          }, {
            id: 7,
            label: '瑜伽俱乐部'
          }, {
            id: 8,
            label: '户外活动俱乐部'
          }, {
            id: 9,
            label: '瑜伽俱乐部'
          }
        ]
      },
      zoom: 100
    }
  },
  methods: {
    addressChange: function () {
      console.log(this.address)
    }
  }
}
</script>

<style scoped>
  .ivu-card {
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .club-card {
    position: relative;
  }
  .club-card-add {
    position: absolute;
    width: 80px;
    bottom: 15px;
    right: 14px;
  }
</style>
